<script setup lang="ts" name="GoodsCategory">
import { Filter, Plus, Search, Refresh, Delete, Edit } from '@element-plus/icons-vue'
import { useTablePage } from '@/hooks/useTablePage'
import { getPageList, deleteById } from '@/api/goods/category'

const {
  tableListRef,
  queryFormRef,
  editRef,
  loading, query, queryVisible, tableList, pageTypes,
  filterButton,
  handleAdd,
  handleQuery,
  resetForm,
  handleEdit,
  handleDelete,
  queryData,
} = useTablePage<GoodsCategoryType, GoodsCategoryQuery>({ getPageList, deleteById })


</script>

<template>
  <div class="page-nav" v-loading="loading">
    <div class="search">
      <div class="search-btn">
        <el-button :icon="Filter" @click="filterButton()">{{ queryVisible ? '隐藏' : '查询' }}</el-button>
        <el-button :icon="Plus" @click="handleAdd()">新增分类</el-button>
      </div>
      <div class="search-params" v-show="queryVisible">
        <el-form inline :model="query" ref="queryFormRef">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="query.name" maxlength="100" placeholder="请输入分类名称" clearable style="width: 200px;" />
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button :icon="Search" type="primary" @click="handleQuery()">搜 索</el-button>
            <el-button :icon="Refresh" type="success" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="table-bar">
      <el-table :class="queryVisible ? 'table-minHeight' : 'table-maxHeight'" ref="tableListRef" :data="tableList"
        border stripe>
        <el-table-column align="center" type="index" />
        <el-table-column align="center" prop="name" label="分类名称" show-overflow-tooltip />
        <el-table-column align="center" prop="status" label="分类状态" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'warning'">{{ row.status ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="排序号" show-overflow-tooltip />
        <el-table-column align="center" prop="remarks" label="备注信息" show-overflow-tooltip />
        <el-table-column fixed="right" align="center" label="操作" width="160">
          <template #default="{ row }">
            <el-button @click.stop="handleEdit(row)" :icon="Edit" type="warning" link>修改</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.name}】吗？`">
              <template #reference>
                <el-button :icon="Delete" type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination :page="pageTypes" @pageChange="queryData"></pagination>

    <CategoryEdit ref="editRef" @refresh="queryData"></CategoryEdit>
  </div>
</template>

<style scoped lang="scss"></style>